<template>
  <div id="app">
    <el-card>
      <!-- 选择区域 -->
      <el-form :inline="true" label-width="68px">
        <el-form-item>
          <el-button style="border: none" @click="showLine">
            <svg t="1688184274912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2621" width="45" height="45">
              <path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="2622"></path>
              <path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="2623"></path>
            </svg>
          </el-button>
          <el-button style="border: none" @click="showBar">
            <svg t="1688184687670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3647" width="45" height="45">
              <path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3648"></path>
              <path
                d="M512 752.16a32 32 0 0 1-32-32V350.624a32 32 0 0 1 64 0v369.536a32 32 0 0 1-32 32zM320 752.576a32 32 0 0 1-32-32V512a32 32 0 0 1 64 0v208.576a32 32 0 0 1-32 32zM896 752.672a32 32 0 0 1-32-32V163.488a32 32 0 1 1 64 0v557.184a32 32 0 0 1-32 32zM704 752.736a32 32 0 0 1-32-32V224a32 32 0 1 1 64 0v496.736a32 32 0 0 1-32 32z"
                p-id="3649"
              ></path>
            </svg>
          </el-button>
          <el-button style="border: none" @click="showPie">
            <svg t="1688184708543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4683" width="45" height="45">
              <path
                d="M896 480c-1.344 0-2.464 0.608-3.744 0.768-1.28-0.16-2.432-0.768-3.744-0.768H544V132c0-0.704-0.352-1.312-0.416-2.016 0.064-0.672 0.416-1.28 0.416-1.984a32 32 0 0 0-32-32C282.624 96 96 282.624 96 512s186.624 416 416 416 416-186.624 416-416a32 32 0 0 0-32-32zM512 864C317.92 864 160 706.08 160 512 160 328.704 300.864 177.856 480 161.632V512a32 32 0 0 0 32 32h350.368C846.144 723.136 695.296 864 512 864zM625.664 178.72a355.36 355.36 0 0 1 216.832 211.84 32 32 0 1 0 60.064-22.048 414.24 414.24 0 0 0-256.224-250.336 31.968 31.968 0 1 0-20.672 60.544z"
                p-id="4684"
              ></path>
            </svg>
          </el-button>
        </el-form-item>
        <el-form-item label="省份:" style="float: right; padding: 15px">
          <el-select v-model="queryParams.rid" placeholder="请选择省份" filterable @change="regionChanged">
            <el-option v-for="item in regionList" :key="item.rid" :label="item.rname" :value="item.rid"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别:" style="float: right; padding: 15px">
          <el-select v-model="queryParams.cid" placeholder="请选择类别" @change="categoryChanged">
            <el-option v-for="item in categoryList" :key="item.cid" :label="item.cname" :value="item.cid"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 图表区域 -->
      <!-- 折线图 -->
      <el-row>
        <el-col v-show="lineFlag">
          <el-card>
            <div id="line" style="width: 1100px; height: 600px"></div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 柱状图 -->
      <el-row>
        <el-col v-show="barFlag">
          <el-card>
            <div id="bar" style="width: 1100px; height: 600px"></div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 饼图 -->
      <el-row v-show="pieFlag">
        <el-col>
          <el-card>
            <div id="pie" style="width: 1100px; height: 600px"></div>
          </el-card>
        </el-col>
      </el-row>

      <table>
        <thead>
          <tr>
            <th>2022-06</th>
            <th>2022-07</th>
            <th>2022-08</th>
            <th>2022-09</th>
            <th>2022-10</th>
            <th>2022-11</th>
            <th>2022-12</th>
            <th>2023-01</th>
            <th>2023-02</th>
            <th>2023-03</th>
            <th>2023-04</th>
            <th>2023-05</th>
            <!-- <th>最近12个月</th> -->
            <th>
              <el-select v-model="selected" @change="selectChanged" size="mini">
                <el-option v-for="item in options" :key="item.id" :label="item.option" :value="item.id"> </el-option>
              </el-select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="(item, index) in cpiList" :key="index">{{ item }}</td>
            <td>{{ cpiAvg }}</td>
          </tr>
        </tbody>
      </table>
    </el-card>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import { listRegion, listCategory, listCpi, listNCpi } from '@/api/cpi/cpi'
export default {
  data() {
    return {
      // 各图表的显示标记
      lineFlag: false,
      barFlag: false,
      pieFlag: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        mid: null,
        cid: 1,
        rid: 32
      },
      // 总条数
      total: 0,
      // 省份表格数据列表
      regionList: [],
      // 分类表格数据
      categoryList: [],
      // cpi数据
      cpiList: [],
      // cpi总和
      sum: 0,
      // cpi平均
      cpiAvg: 0,
      // 选项数据
      options: [
        { id: 1, option: '最近12个月' },
        { id: 2, option: '最近6个月' },
        { id: 3, option: '最近3个月' }
      ],
      selected: 1
    }
  },
  methods: {
    setLine() {
      let myEcharts = echarts.init(document.getElementById('line'))
      myEcharts.setOption(
        {
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'category',
            data: ['2022-06', '2022-07', '2022-08', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05']
          },
          yAxis: {
            type: 'value',
            min: 90,
            max: 120
          },
          series: [
            {
              data: this.cpiList,
              type: 'line',
              itemStyle: {
                color: 'rgb(255, 70, 131)'
              }
            }
          ]
        },
        true,
        false
      )
    },
    setBar() {
      let myEcharts = echarts.init(document.getElementById('bar'))
      myEcharts.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'category',
            data: ['2022-06', '2022-07', '2022-08', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05']
          },
          yAxis: {
            type: 'value',
            min: 90,
            max: 120
          },
          series: [
            {
              data: this.cpiList,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              itemStyle: {
                color: 'rgb(255, 70, 131)'
              }
            }
          ]
        },
        true,
        false
      )
    },
    setPie() {
      let myEcharts = echarts.init(document.getElementById('pie'))
      myEcharts.setOption(
        {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '所占百分比',
              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: [
                { value: ((this.cpiList[0] / this.sum) * 100).toFixed(2), name: '2022-06' },
                { value: ((this.cpiList[1] / this.sum) * 100).toFixed(2), name: '2022-07' },
                { value: ((this.cpiList[2] / this.sum) * 100).toFixed(2), name: '2022-08' },
                { value: ((this.cpiList[3] / this.sum) * 100).toFixed(2), name: '2022-09' },
                { value: ((this.cpiList[4] / this.sum) * 100).toFixed(2), name: '2022-10' },
                { value: ((this.cpiList[5] / this.sum) * 100).toFixed(2), name: '2022-11' },
                { value: ((this.cpiList[6] / this.sum) * 100).toFixed(2), name: '2022-12' },
                { value: ((this.cpiList[7] / this.sum) * 100).toFixed(2), name: '2023-01' },
                { value: ((this.cpiList[8] / this.sum) * 100).toFixed(2), name: '2023-02' },
                { value: ((this.cpiList[9] / this.sum) * 100).toFixed(2), name: '2023-03' },
                { value: ((this.cpiList[10] / this.sum) * 100).toFixed(2), name: '2023-04' },
                { value: ((this.cpiList[11] / this.sum) * 100).toFixed(2), name: '2023-05' }
              ]
            }
          ]
        },
        true,
        false
      )
    },
    // 重置图表
    resetCharts() {
      this.lineFlag = false
      this.barFlag = false
      this.pieFlag = false
    },
    // 显示各图表
    showLine() {
      if (this.lineFlag === false) {
        this.resetCharts()
        this.setLine()
        this.lineFlag = true
      } else {
        this.resetCharts()
      }
    },
    showBar() {
      if (this.barFlag === false) {
        this.resetCharts()
        this.setBar()
        this.barFlag = true
      } else {
        this.resetCharts()
      }
    },
    showPie() {
      if (this.pieFlag === false) {
        this.resetCharts()
        this.setPie()
        this.pieFlag = true
      } else {
        this.resetCharts()
      }
    },
    /** 查询地区列表 */
    getRegionList() {
      listRegion(this.queryParams).then((response) => {
        this.regionList = response.rows
      })
    },
    /** 查询分类列表 */
    getCategoryList() {
      listCategory(this.queryParams).then((response) => {
        this.categoryList = response.rows
      })
    },
    /** 查询数据管理列表 */
    getList() {
      listCpi(this.queryParams).then((response) => {
        this.cpiList = []
        response.rows.forEach((element) => {
          this.cpiList.push(Number(element.cpi))
        })
        this.sum = 0
        this.cpiList.forEach((item) => {
          this.sum += item
        })
        this.cpiAvg = (this.sum / this.cpiList.length).toFixed(2)
        this.total = response.total
      })

      listNCpi(this.queryParams).then((response) => {
        this.cpiList = []
        response.rows.forEach((element) => {
          this.cpiList.push(Number(Number(element.cpi).toFixed(2)))
        })
        this.sum = 0
        this.cpiList.forEach((item) => {
          this.sum += Number(item)
        })
        this.cpiAvg = (this.sum / this.cpiList.length).toFixed(2)
        this.total = response.total
      })
    },
    regionChanged() {
      if (this.queryParams.rid != 32) {
        listCpi(this.queryParams)
          .then((response) => {
            this.cpiList = []
            response.rows.forEach((element) => {
              this.cpiList.push(Number(element.cpi))
            })
          })
          .then(() => {
            this.selected = 1
            this.sum = 0
            this.cpiList.forEach((item) => {
              this.sum += item
            })
            this.cpiAvg = (this.sum / this.cpiList.length).toFixed(2)
            if (this.lineFlag) {
              this.setLine()
            }
            if (this.barFlag) {
              this.setBar()
            }
            if (this.pieFlag) {
              this.setPie()
            }
          })
      } else {
        listNCpi(this.queryParams)
          .then((response) => {
            this.cpiList = []
            response.rows.forEach((element) => {
              this.cpiList.push(Number(Number(element.cpi).toFixed(2)))
            })
          })
          .then(() => {
            if (this.lineFlag) {
              this.setLine()
            }
            if (this.barFlag) {
              this.setBar()
            }
            if (this.pieFlag) {
              this.setPie()
            }
          })
          .then(() => {
            this.selectChanged()
          })
      }
    },
    categoryChanged() {
      if (this.queryParams.rid != 32) {
        listCpi(this.queryParams)
          .then((response) => {
            this.cpiList = []
            response.rows.forEach((element) => {
              this.cpiList.push(Number(element.cpi))
            })
          })
          .then(() => {
            this.selected = 1
            this.sum = 0
            this.cpiList.forEach((item) => {
              this.sum += item
            })
            this.cpiAvg = (this.sum / this.cpiList.length).toFixed(2)
            if (this.lineFlag) {
              this.setLine()
            }
            if (this.barFlag) {
              this.setBar()
            }
            if (this.pieFlag) {
              this.setPie()
            }
          })
      } else {
        listNCpi(this.queryParams)
          .then((response) => {
            this.cpiList = []
            response.rows.forEach((element) => {
              this.cpiList.push(Number(Number(element.cpi).toFixed(2)))
            })
          })
          .then(() => {
            if (this.lineFlag) {
              this.setLine()
            }
            if (this.barFlag) {
              this.setBar()
            }
            if (this.pieFlag) {
              this.setPie()
            }
          })
          .then(() => {
            this.selectChanged()
          })
      }
    },
    selectChanged() {
      this.sum = 0
      if (this.selected === 1) {
        // 最近12个月
        this.cpiList.forEach((item) => {
          this.sum += item
        })
        this.cpiAvg = (this.sum / this.cpiList.length).toFixed(2)
      } else if (this.selected === 2) {
        // 最近6个月
        for (let i = 6; i < this.cpiList.length; i++) {
          this.sum += this.cpiList[i]
        }
        this.cpiAvg = (this.sum / 6).toFixed(2)
      } else {
        // 最近3个月
        for (let i = 9; i < this.cpiList.length; i++) {
          this.sum += this.cpiList[i]
        }
        this.cpiAvg = (this.sum / 3).toFixed(2)
      }
      console.log(this.sum)
    }
  },
  created() {
    this.getRegionList()
    this.getCategoryList()
    this.getList()
  }
}
</script>

<style scoped>
.el-card {
  padding: 15px;
  margin-bottom: 15px;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table caption {
  font-size: 2em;
  font-weight: bold;
  margin: 1em 0;
}
th,
td {
  border: 1px solid #eee;
  text-align: center;
  padding: 10px 0;
}
table thead tr {
  background-color: #f8f8f8;
}
table tbody tr {
  background-color: #fff;
}
table tfoot tr td {
  text-align: right;
  padding-right: 20px;
}
</style>
